<template>
  <div class="myspace-container">
    <TempPage>
      <template #main-left>
        <div class="main-left">
          <section class="main-left-header">
            <h1 class="main-left-title">个人中心</h1>
          </section>
          <section class="main-left-main">
            <el-tabs tab-position="top" class="tabs-left" @tab-click="handleTabClick" v-model="activeName">
              <el-tab-pane label="个人信息" name="user">
                <article class="main-left-items">
                  <SpaceInfo :newUserInfo="userInfo"></SpaceInfo>
                </article>
              </el-tab-pane>

              <el-tab-pane label="文章管理" name="article_setting">
                <article class="new-art">
                  <!-- <ArticleItem :tabId="tabId" :tabName="tabName" :articleInfo="articleInfo" v-if="articleInfo.length > 0"></ArticleItem>
                  <h1 v-else class="h1-center">您未发布过文章</h1> -->
                  <ArticleTable :tabId="tabId" :tabName="tabName" :tableData="articleInfo"></ArticleTable>
                </article>
              </el-tab-pane>

              <el-tab-pane label="收藏记录" name="collect">
                <article class="new-art">
                  <ArticleItem :tabId="tabId" :tabName="tabName" :articleInfo="articleInfo" v-if="articleInfo.length > 0"></ArticleItem>
                  <h1 v-else class="h1-center">收藏记录为空</h1>
                </article>
              </el-tab-pane>

              <el-tab-pane label="点赞记录" name="like">
                <article class="new-art">
                  <ArticleItem :tabId="tabId" :tabName="tabName" :articleInfo="articleInfo" v-if="articleInfo.length > 0"></ArticleItem>
                  <h1 v-else class="h1-center">点赞记录为空</h1>
                </article>
              </el-tab-pane>

              <el-tab-pane label="消息通知" name="message">
                <TipsItems :userInfo="userInfo"></TipsItems>
              </el-tab-pane>
              <el-tab-pane label="好友管理" name="friends">好友管理</el-tab-pane>
            </el-tabs>
          </section>
          <section class="main-left-footer"></section>
        </div>
      </template>
      <template #aside>
        <div>
          <!-- 用户模块 -->
          <Aside class="login-module">
            <template #header>
              <div></div>
            </template>
            <template #main>
              <div>
                <keep-alive>
                  <component :is="comName" :newUserInfo="userInfo" @logoutInfo="getLogoutInfo" @shareNewInfo="getNewInfo"></component>
                </keep-alive>
              </div>
            </template>
            <template #footer>
              <div></div>
            </template>
          </Aside>
        </div>
      </template>
      <template #footer>
        <div></div>
      </template>
    </TempPage>
  </div>
</template>

<script>
import TempPage from '@/components/TempPage'
import SpaceInfo from '@/components/MySpace/SpaceInfo'
import Aside from '@/components/Aside'
import Tabs from '@/components/Tabs'
import UserModule from '@/components/UserModule'
import ArticleItem from '@/components/MySpace/ArticleItem'
import TipsItems from '@/components/MySpace/TipsItems'
import ArticleTable from '@/components/MySpace/ArticleTable'

export default {
  name: 'MySpace',
  // props:[''],
  data () {
    return {
      ip: '',
      userInfo: {},
      articleInfo: [],
      comName: 'UserModule',
      tabId: '',
      tabName: '',
      activeName: 'user',
      tabRefresh: {
        user: true,
        collect: false,
        like: false,
        friends: false
      }
    }
  },
  methods: {
    async initUserInfo () {
      // const username = localStorage.getItem('username')
      const _id = localStorage.getItem('_id')
      const res = await this.$api.queryOne({ _id })
      // console.log(res)
      this.userInfo = res.data.data
    },
    // tabs切换事件
    handleTabClick (tab) {
      // console.log(tab.index)
      this.tabId = tab.index
      this.tabName = tab.name

      this.activeName = tab.name
      switch (this.activeName) {
        case 'user':
          this.initUserInfo()
          break
        case 'article_setting':
          this.initArticleInfo('article_setting')
          break
        case 'collect':
          this.initArticleInfo('collect')
          break
        case 'like':
          this.initArticleInfo('like')
          break
        case 'message':
          console.log('message')
          break
        case 'friends':
          console.log('friends')
          break
      }
    },
    async initArticleInfo (val) {
      if (val === 'article_setting') {
        const author = localStorage.getItem('username')
        const { data: res } = await this.$api.queryByAuthor({ author })
        this.articleInfo = []
        this.articleInfo = res.data
        for (let i = 0; i < this.articleInfo.length; i++) {
          this.articleInfo[i].created_time = this.$forMat(this.articleInfo[i].created_time)
          this.articleInfo[i].last_modified_time = this.$forMat(this.articleInfo[i].last_modified_time)
        }
        console.log(res)
      }
      if (val === 'collect' || val === 'like') {
        /*
        判断tabId来确定获取渲染的数据是收藏的文章还是点赞的文章
      */
        const _id = localStorage.getItem('_id')
        const { data: res } = await this.$api.queryOne({ _id })
        if (this.tabName === 'collect') {
          this.articleInfo = []
          for (let i = 0; i < res.data.user_article.collect.length; i++) {
            const element = JSON.parse(res.data.user_article.collect[i].article_info)
            this.articleInfo.push(element)
          }
          for (let i = 0; i < this.articleInfo.length; i++) {
            this.articleInfo[i].created_time = this.$forMat(this.articleInfo[i].created_time)
            this.articleInfo[i].last_modified_time = this.$forMat(this.articleInfo[i].last_modified_time)
          }
          // console.log(this.articleInfo)
        }
        if (this.tabName === 'like') {
          this.articleInfo = []
          for (let i = 0; i < res.data.user_article.like.length; i++) {
            const element = JSON.parse(res.data.user_article.like[i].article_info)
            this.articleInfo.push(element)
          }
          for (let i = 0; i < this.articleInfo.length; i++) {
            this.articleInfo[i].created_time = this.$forMat(this.articleInfo[i].created_time)
            this.articleInfo[i].last_modified_time = this.$forMat(this.articleInfo[i].last_modified_time)
          }
          // console.log(this.articleInfo)
        }
      }
    },
    // 侧边栏登录模块以及用户数据模块的判断
    getNewInfo (val) {
      setTimeout(() => {
        this.comName = val.comName
      }, 100)
      this.newUserInfo = val.userInfo
      // console.log(val)
    },
    // 退出登录信息
    getLogoutInfo (val) {
      // console.log(val)
      setTimeout(() => {
        this.comName = val
      }, 100)
    }
  },
  created () {
    this.initUserInfo()
  },
  components: {
    TempPage,
    SpaceInfo,
    Aside,
    Tabs,
    UserModule,
    ArticleItem,
    TipsItems,
    ArticleTable
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  // height: 100%;
}
.myspace-container {
  width: 100%;
  // height: 100%;
  background-image: -moz-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: -webkit-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
}
.main-left {
  // margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 50px 55px;
}
.main-left-title {
  text-align: center;
  font-size: 20px;
}
.main-left-main {
  margin-top: 30px;
}
// .main-left-items {
//   margin-top: 30px;
// }
.main-left-footer {
  margin-top: 20px;
}
.login-module {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  margin-bottom: 15px;
}
/deep/ .el-tabs--left .el-tabs__header.is-left {
  margin-right: 30px;
}
// .new-art h1{
//   font-size: 16px;
//   margin-bottom: 20px;
//   color: #303133;
// }
.h1-center {
  text-align: center;
  font-size: 20px;
}
</style>
